<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ApiContractsController" class="page container-pf-nav-pf-vertical container-fluid" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content">
          <div class="col-md-9">
            <div class="title" apiman-i18n-key="api-contracts">API Contracts</div>
            <div class="description" apiman-i18n-key="api-contracts-help">Here is a list of all contracts between all Client Apps and this API. This provides a list of all Client Apps that may potentially consume this API.</div>
          </div>
          <div class="col-md-12" ng-show="isPublicOnly">
            <div aria-hidden="false" style="background-color: rgb(255, 213, 185);" apiman-i18n-key="warning-public-only" data-field="onlyPublicWarning" class="alert alert-warning no-icon">Warning: this API is exclusively public, which means that it is impossible for Client Apps to create API contracts with it.</div>
          </div>
          <div class="col-md-12">
            <div class="table-responsive">
              <scrollable-table style="height: 150px">
                <table class="table table-striped table-bordered table-hover" data-field="contracts">
                  <thead>
                  <tr>
                    <th style="width: 70%" apiman-i18n-key="client-client" nowrap="nowrap">Client App</th>
                    <th apiman-i18n-key="plan" nowrap="nowrap">Plan</th>
                    <th apiman-i18n-key="created-on_capitalized" nowrap="nowrap">Created On</th>
                  </tr>
                  </thead>
                  <tbody>

                  <tr ng-hide="contracts.length > 0">
                    <td colspan="3">
                      <div class="apiman-no-content container-fluid">
                        <div class="row">
                          <div class="col-md-12">
                            <p class="apiman-no-entities-description" apiman-i18n-key="no-api-contracts">This API doesn't appear to have any contracts. This means that there aren't any client apps consuming this API.  Note: if this is a public API, then no contracts are necessary to invoke the API!</p>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>

                  <tr ng-repeat="contract in contracts">
                    <td>
                      <span>
                        <a href="{{ pluginName }}/browse/orgs/{{ contract.clientOrganizationId }}"><span>{{ contract.clientOrganizationName }}</span></a>
                        <span apiman-i18n-skip>/</span>
                        <span class="emphasis">{{ contract.clientName }}</span>
                        <span apiman-i18n-skip>&#8680;</span>
                        <span>{{ contract.clientVersion }}</span>
                      </span>
                    </td>
                    <td><span>{{ contract.planName }}</span></td>
                    <td><span>{{ contract.createdOn | date:'yyyy-MM-dd' }}</span></td>
                  </tr>
                  </tbody>
                </table>
              </scrollable-table>

            </div>
            <div style="text-align: center" ng-hide="contracts.length == 0">
              <button ng-show="hasMore" ng-click="getNextPage()" class="btn btn-default" data-field="moreButton" apiman-i18n-key="show-more-contracts" placeholder="Loading..." data-icon="fa-cog">Show More Contracts</button>
            </div>
          </div>
        </div>
        <!-- /Content -->
      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </div>
  </body>
</html>
